<?php
    $this->headTitle($this->enterprise->company_name_vn.': '.$this->translator('b2b_gallery_add'));
    $this->headScript()
    ->appendFile($this->APP_STATIC_SERVER . '/js/jquery.validate/jquery.validate.min.js');
?>
<style>
    .b_a_right{
        text-align: right;
    }
    .g_content{

    }
    .col_20{
        float: left;
        width: 20%;
    }
    .g_content{
        padding : 10px 0 0 0;
    }
    .g_content .g_image{
        text-align: center;
    }
    .g_content .subcolumns{
        padding: 0 0 10px 0;
    }
    .b_bottom{
        margin-bottom: 15px;
    }    
</style>
<div class="grid_12">
    <div class="grid_8 alpha">
        <!--Sub menu-->
        <?php echo $this->widget('bizprofile','menu',array()); ?>
        <!--End sub menu-->
        <div class="subcolumns pb10">
            <div class="b_breadcrumb b_bottom">
                <?php
                    $arrParamGallery = array(
                        'enterprise_id' => $this->enterprise->id,
                        'enterprise_name' => Tomato_Utility_String::removeSign($this->enterprise->company_name_en, '-', true)
                    );
                ?>
                <a href="<?php echo $this->url($arrParamGallery, 'b2b_gallery_list');?>"><?php echo $this->translator('gallery_list_breadcrumb');?></a> »
                <?php echo $this->translator('gallery_add_breadcrumb');?>
            </div>
            <div class="flash_message">
                <?php echo $this->flashMessenger(); ?>
            </div>
            <div class="b_bottom g_a_guide">
                <?php echo $this->translator('gallery_upload_guide');?>
            </div>
            <form action="" method="POST" id="addGalleryForm">
                <div class="t_bizprofile_register">
                    <div class="clearfix">
                        <label><?php echo $this->translator('blog_old_set'); ?>:</label>
                        <select name="oldSet" id="oldSet" style="width:200px;">
                            <option value="">---</option>
                            <?php foreach($this->sets as $set):?>
                            <option value="<?php echo $set->set_id;?>"><?php echo $set->title;?></option>
                            <?php endforeach;?>
                        </select>
                    </div>
                    <div class="clearfix">
                        <label><?php echo $this->translator('blog_new_set'); ?>:</label>
                        <input type="text" name="newSet" id="newSet" style="width:200px;"/>
                    </div>
                    <style>
                        .invalid span label{
                            width: auto;
                        }
                        .invalid span label.error{
                            padding-left: 125px;
                        }
                    </style>
                    <div class="clearfix invalid">
                        <span id="invalid-submit"></span>
                    </div>
                    <!-- Photos -->
                    <div class="clearfix">
                        <?php
                        echo $this->helperLoader('upload')->uploader('multimedia',
                            array('extension' => '*.jpg;*.jpeg;*.png;*.gif', 'multi' => true, 'auto' => true, 'simUploadLimit' => 5, 'sizeLimit' => 1024 * 1024 * 0.3),
                            array('onProgress' => 'onUploadProgress', 'onComplete' => 'onUploadComplete'),
                            'uploadFiles');
                        ?>
                        <div style="width: 640px; height: 200px; overflow: auto; border: 1px solid #E2E0E0">
                            <ul id="photos" style="list-style-type:none"></ul>
                        </div>
                    </div>

                    <div class="clearfix">
                        <label>&nbsp;</lable>
                        <input type="hidden" name="title" id="title" />
                        <input type="hidden" name="square" id="square" />
                        <input type="hidden" name="thumbnail" id="thumbnail" />
                        <input type="hidden" name="small" id="small" />
                        <input type="hidden" name="crop" id="crop" />
                        <input type="hidden" name="medium" id="medium" />
                        <input type="hidden" name="large" id="large" />
                        <input type="hidden" name="original" id="original" />

                        <input type="submit" name="btn_save" value="<?php echo $this->translator('gallery_btn_save');?>"/>
                    </div>

                </div>
            </form>
        </div>
    </div>
    <div class="grid_4 omega">
        <?php echo $this->widget('bizprofile','map',array()); ?>
        <?php echo $this->widget('bizprofile','help',array()); ?>
    </div>
</div>
<div class="grid_12">
    <?php echo $this->widget('bizprofile','contact',array()); ?>
</div>

<script type="text/javascript">

    /**
    * Upload handlers
    */
    function onUploadComplete(event, ID, fileObj, response, data) {
        var images = $.evalJSON(response);
        var res = response;
        $('<li style="float: left; padding: 10px"><img src="' + images.square.url + '" width="75px" height="75px" /></li>').appendTo($('#photos'));
        $('#title').val($('#title').val() + ',' + fileObj.name);

        var thumbnails = ['square', 'thumbnail', 'small', 'crop', 'medium', 'large', 'original'];
        for (var i in thumbnails) {
            $('#' + thumbnails[i]).val($('#' + thumbnails[i]).val() + ',' + images[thumbnails[i]].url);
        }
        $('#watermark').removeAttr('disabled');
        if ($('#watermark').attr('checked')) {
            $('#watermarkContainer').show();
        }
    };

    function onUploadProgress(event, ID, fileObj, data) {
        $('#watermark').attr('disabled', 'disabled');
        $('#watermarkContainer').hide();
    };

    function onUploadWatermarkComplete(event, ID, fileObj, response, data) {
        var res = $.evalJSON(response);
        $('#watermarkImageUrl').attr('value', res.original.url);
        $('#watermarkImage').attr('src', res.original.url).show();
        updateUploadSettings();
    };

    function updateUploadSettings() {
        var text = image = '';
        switch ($('#watermarkMethod').val()) {
            case 'text':
                text = $('#watermarkText').val();
                break;
            case 'image':
                image = $('#watermarkImageUrl').val();
                break;
        }

        var sizes = '';
        $('#sizesContainer').find('input').each(function() {
            if ($(this).attr('checked') == true) {
                sizes += ',' + $(this).attr('value');
            }
        });
        sizes = sizes.substring(1);

        $('#uploadFiles').uploadifySettings('scriptData', {'watermark': '1', 'text': text, 'color': $('#watermarkColor').attr('value'), 'image': image, 'position': $('#watermarkPosition').val(), 'sizes': sizes});
    };

    $(document).ready(function(){

        $("form").submit(function () {
            newSet = $('#newSet').val();
            newSet = newSet.replace(/^\s+|\s+$/g, '')

            oldSet = $('#oldSet').val();
            title = $('#title').val();
            if(newSet == '' && oldSet == ''){
                $('#invalid-submit').html("<label class=\"error\"><?php echo $this->translator('please_choose_set');?></label>");
                return false;
            }
            else if(title == ''){
                $('#invalid-submit').html("<label class=\"error\"><?php echo $this->translator('please_choose_image');?></label>");
                return false;
            }
            return true;
        });

        $('#newSet').keyup(function() {
            newSet = $(this).val();
            newSet = newSet.replace(/^\s+|\s+$/g, '')
            if(newSet != ''){
                $('#invalid-submit').html('');
            }else{
                $('#invalid-submit').html("<label class=\"error\"><?php echo $this->translator('please_choose_set');?></label>");
            }
        })
        $('#oldSet').change(function() {
            if($(this).val() != ''){
                $('#invalid-submit').html('');
            }else{
                $('#invalid-submit').html("<label class=\"error\"><?php echo $this->translator('please_choose_set');?></label>");
            }
        })
    });
</script>